<template>
  <div>
    <div style="box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width:90vn" ref="gsBox">
    <div class="codetext">渐变动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-select style="width:350px;margin:10px" :options="options" gsStyle="info" v-model="str" trends="gscenter" placeholder="请选择类型"></gs-select>
    </div>
    <div class="codetext">淡出动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-select style="width:350px;margin:10px" :options="options" gsStyle="success" v-model="str" trends="gsopacity" ></gs-select>
    </div>
    <div class="codetext">下拉动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-select style="width:350px;margin:10px" :options="options" gsStyle="primary" v-model="str" trends="drop" ></gs-select>
    </div>
    <div class="codetext">禁用</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-select style="width:350px;margin:10px" :options="options" gsStyle="primary" disabled v-model="str" trends="drop" ></gs-select>
    </div>
    <div class="codetext">多选</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-select style="width:350px;margin:10px" :options="options" gsStyle="warning" v-model="strArr" trends="drop" ></gs-select>
    </div>
    <!--  -->
    <pre class="code">
      <span class="codetitle">使用disabled定义是否禁用</span>
      <span class="codetitle">使用gsStyle定义风格一共八种风格 dark,primary, success, warning, danger, info,round,while</span>
      <span class="codetitle">使用trends定义动画效果</span>
      <span class="codetitle">使用placeholder提示</span>
      <span class="codetitle">options会同时过滤name和value</span>
      <gs-code title="gs-select"  attr=':options="options" gsStyle="primary" v-model="strArr" trends="drop"'></gs-code>
      <!-- <gs-code title="gs-button" attr='size="small" type="success" circle'><gs-code title="i" attr='class="iconfont iconclear"'></gs-code></gs-code> -->
      options:{{options}}
    </pre>
      
    <!--  -->
    </div>
  </div>
</template>
<script>
import gsSelect from "../components/select/select";
import gsCode from "./code";
export default {
  name: 'vSelect',
  components: {
    gsCode,
    gsSelect
  },
  data(){
    return {
      options:[
        {value:"001",name:"利群"},
        {value:"002",name:"双喜"},
        {value:"003",name:"中华"},
        {value:"004",name:"公主"},
        {value:"005",name:"兰州"},
        {value:"006",name:"白沙"},
        {value:"007",name:"泰山"},
        {value:"008",name:"贵州"},
        {value:"009",name:"云烟"},
        {value:"010",name:"玉溪"},
        {value:"011",name:"黄鹤楼"},
        {value:"012",name:"红塔山"},
        {value:"013",name:"娇子"},
        {value:"014",name:"芙蓉王"}
      ],
      str:"",
      strArr:[]
    }
  },
  methods:{
    click(){
      this.$emit("click",arguments)
    },
  },
}
</script>
